<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../static/plugins/layui/css/formSelects-v4.css">

</head>
<style>
    .ok-body {
        padding: 10px
    }

    input[readonly].layui-input {
        border: none;
        font-size: large;
    }
</style>

<body>
<div class="ok-body">

    <!--<a href="javascript:history.go(-1)" class="layui-btn layui-btn-lg layui-btn-normal">返回</a>-->


    <blockquote class="layui-elem-quote layui-text">
        故障详情
    </blockquote>

    <form class="layui-form " action="">
        <input type="hidden" name="id" id="id" th:value="${id}">

        <div class="layui-form-item">
            <label class="layui-form-label">设备编号</label>
            <div class="layui-input-inline">
                <input type="text" name="deviceNumber" readonly class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">故障现象</label>
                <div class="layui-input-inline">
                    <input type="text" name="symptom" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">原因分析</label>
                <div class="layui-input-inline">
                    <input type="text" name="reason" readonly class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: smaller;">故障发生时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="faultTime" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: smaller;">故障解决时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="solveTime" readonly class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: smaller;">故障排除时长</label>
                <div class="layui-input-inline">
                    <input type="text" name="duration" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="font-size: smaller;">设备停机时长</label>
                <div class="layui-input-inline">
                    <input type="text" name="stopDuration" readonly class="layui-input">
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">故障详情</label>
            <div id="faultDetail" class="faultDetails">
                <div class="layui-input-block" style="height: 50px" >
                    <textarea name="content" readonly  style="min-height: 40px;" class="layui-textarea"></textarea>
                </div>
                <br>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">维修人员</label>
            <div class="layui-input-block" style="width: 600px">
                <input type="text" name="solveName" readonly class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">关键词</label>
            <div class="layui-input-block" style="width: 600px">
                <select name="keyWordId" lay-verify="required" xm-select="keyWord" xm-select-skin="normal"
                        lay-filter="keyWordId">

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">故障排除过程</label>
            <div class="layui-input-block" style="width: 600px">
                <textarea name="resolvent" readonly class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" name="status" readonly class="layui-input">
            </div>
        </div>
    </form>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '../static/plugins/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['form', 'formSelects', 'laydate', 'util'], function () {
        var form = layui.form;
        var formSelects = layui.formSelects;
        var util = layui.util;
        var laydate = layui.laydate;
        var tableName = 'faultInfo';
        var id = $('#id').val();


        formSelects.disabled('keyWord');
        var param = 'current=1&pageSize=2&searchCol=id&searchValue=' + id;
        JJZ.requestTableData(tableName, param, function (data) {
            var result = data.records[0];
            //初始化设备编号
            JJZ.named('deviceNumber').val(result.deviceNumber);
            //初始化故障部位
            JJZ.named('partName').val(result.partName);
            //初始化维修人员
            JJZ.named('solveName').val(result.solveName);

            //初始化关键词下拉框
            JJZ.initMultipleSelect(formSelects, 'keyWord', '/keyWord/dataGrid', 'name', function (noError) {
                if (noError) {
                    var strs = new Array(); //定义一数组
                    strs = result['keyWordId'].split(","); //字符分割
                    formSelects.value('keyWord', strs);
                }
            });

            initFaultPart(JSON.parse(result.faultContent));
            JJZ.named('symptom').val(result.symptom);
            JJZ.named('duration').val(result.duration + ' 分钟');
            JJZ.named('reason').val(result.reason);
            JJZ.named('stopDuration').val(result.stopDuration + ' 分钟');
            JJZ.named('faultTime').val(util.toDateString(result.faultTime, 'yyyy-MM-dd HH:mm'));
            JJZ.named('solveTime').val(util.toDateString(result.solveTime, 'yyyy-MM-dd HH:mm'));
            JJZ.named('resolvent').val(result.resolvent);
            result.status == 1 ? JJZ.named('status').val('正常') : JJZ.named('status').val('其他');
        });

        //用于初始化编辑时的故障部位信息
        function initFaultPart(faultContentList) {
            var length = faultContentList.length;
            var changeComponents = faultContentList[0].changeComponent;
            var companentNames = [];
            for (var i in changeComponents) {
                companentNames.push(changeComponents[i].componentName);
            }
            var firstContent = String.format('故障部位:{0}\n更换零件:{1}', faultContentList[0].faultPartName, companentNames.join("、"));
            JJZ.named('content').val(firstContent);

            for (var j = 1; j < length; j++) {
                var faultPartDiv = $('#faultDetail').clone();
                $(faultPartDiv).removeAttr("id");
                $(faultPartDiv).prepend('<label class="layui-form-label" style="border: none;background-color: transparent"></label>');
                var tempChangeComponents = faultContentList[j].changeComponent;
                var tempCompanentNames = [];
                for (var k in tempCompanentNames) {
                    tempCompanentNames.push(tempChangeComponents[k].componentName);
                }
                var tempContent = String.format('故障部位:{0}\n更换零件:{1}', faultContentList[j].faultPartName, tempCompanentNames.join("、"));
                $(faultPartDiv).find('textarea[name="content"]').val(tempContent);
                $('div.faultDetails:last').after(faultPartDiv);
            }
            form.render();
        }
    });

    String.prototype.format = function (args) {
        var result = this;
        if (arguments.length > 0) {
            if (arguments.length == 1 && typeof (args) == "object") {
                for (var key in args) {
                    if (args[key] != undefined) {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            }
            else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] != undefined) {
                        //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题，谢谢何以笙箫的指出
                        var reg = new RegExp("({)" + i + "(})", "g");
                        result = result.replace(reg, arguments[i]);
                    }
                }
            }
        }
        return result;
    }
    String.format = function () {
        if (arguments.length == 0)
            return null;

        var str = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
            str = str.replace(re, arguments[i]);
        }
        return str;
    }
</script>
</body>
</html>